{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>XMBSMDSJ</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css'%}">

    <!-- FontAwesome CSS -->
    <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">

    <!-- Styles -->
    <link rel="stylesheet" href="{% static 'style.css'%}">
    <link rel="stylesheet" href="{% static 'css/gallery/gallery.css'%}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script type='text/javascript' src="{% static 'js/jquery.js'%}"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

    <script src="{%static 'js/gallery/service.js'%}"></script>

    <script>
        $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    function getCookie(name) {
                        var cookieValue = null;
                        if (document.cookie && document.cookie != '') {
                            var cookies = document.cookie.split(';');
                            for (var i = 0; i < cookies.length; i++) {
                                var cookie = jQuery.trim(cookies[i]);
                                // Does this cookie string begin with the name we want?
                                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                    break;
                                }
                            }
                        }
                        return cookieValue;
                    }
                    if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                        // Only send the token to relative URLs i.e. locally.
                        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));

                    }
                }
            });
            var fetch_url = "{%url 'gallery:fetch'%}";
            var photo_upload_url = "{%url 'gallery:upload'%}"
    </script>
</head>
<body>
<header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a href="/" rel="home"><img src="{% static 'images/xm.png' %}"  alt="Logo" height="42" width="42"></a></h1>
    </div><!-- .site-branding -->

    <div class="hamburger-menu">
        <div class="menu-icon">
            <img src="{% static 'images/menu-icon.png' %}" alt="menu icon">
        </div><!-- .menu-icon -->

        <div class="menu-close-icon">
            <img src="{% static 'images/x.png' %}"  alt="menu close icon">
        </div><!-- .menu-close-icon -->
    </div><!-- .hamburger-menu -->
</header><!-- .site-header -->

<nav class="site-navigation flex flex-column justify-content-between">
    <div class="site-branding d-none d-lg-block ">
        <h1 class="site-title"><a href="/" rel="home"><img src="{% static 'images/xm.png' %}"  alt="Logo" height="42" width="42"></a></h1>
    </div><!-- .site-branding -->

    <ul class="main-menu flex flex-column justify-content-center">
        <li class="current-menu-item"><a href="/">Home</a></li>
        <li><a href="/blog/">Blogs</a></li>
        <li><a href="/about/">About Me</a></li>
        
    </ul>
<center>
        <p ><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
        xmbsmdsj
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</center>



    <div class="social-profiles">
        <ul class="flex justify-content-start justify-content-lg-center align-items-center">
            <li><a href="https://www.instagram.com/wen_yun_lu/"><i class="fa fa-instagram"></i></a></li>
            <li><a href="http://www.linkedin.com/in/yunlu-wen-b274b186"><i class="fa fa-linkedin"></i></a></li>
            <li><a href="https://github.com/wylswz"><i class="fa fa-github"></i></a></li>
        </ul>
    </div><!-- .social-profiles -->
</nav><!-- .site-navigation -->

<div class="nav-bar-sep d-lg-none"></div>


    {%block content%}
    {%endblock%}




<script type='text/javascript' src="{% static 'js/custom.js'%}"></script>

</body>
</html>